<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
	  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/bootstrap-editable.css" rel="stylesheet">
       <link href="css/bootstrap-datetimepicker.css" rel="stylesheet">
      <script src="js/jquery-1.11.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/bootstrap-editable.js"></script>
      <script src="js/bootstrap-datepicker.zh-CN.js"></script>
      <script src="js/bootstrap-datetimepicker.js"></script>
      <script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
      <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <script src="js/respond.min.js"></script>
      <![endif]-->
   </head>
   <style>
   	body{padding:100px}
   </style>
   <body>
   	<div class="container">
   		<div class="row">
   			<div class="col-xs-8 col-xs-offset-2">
   				<table class="table table-bordered text-center">
	   				<tr>
	   					<td class="text">世界你好</td>
	   					<td class="number">12</td>
	   					<td class="data">2015-11-05</td>
	   				</tr>
   				</table>
   				<table class="table table-bordered text-center">
   					<tr>
	   					<td class="select">世界你好</td>
	   					<td class="checklist">12</td>
	   					<td class="datetime">2015-11-05</td>
	   				</tr>
	   				</table>
   			</div>
   		</div>
   	</div>
   	<script>
   		$('.text').editable({
   			type:'text',
   			placement:'bottom',//改变修改框的位置
   			//mode:'inline',//输入框里面修改
   			url:'update.php',
   			name:'login',
   			pk:7,//修改或更新Id为7的数据
   			validate:function(v){
   				if(!v.match(/^\d+$/)){
   					return '只能是数字';
   				}
   				if (v.length<5) {
   					return '登录名至少五位';
   				}
   				return false;
   			},
   			error:function(q){
   				alert('与服务器交互出错');
   			}
   		});
   		$('.number').editable({
   			//type:'number',//没有这个类型 但可以修改 控制台出错
   			placement:'bottom',//改变修改框的位置
   			validate:function(v){
   				if(!v.match(/^\d+$/)){
   					return '服务器交互出错,只能是数字';
   				}
   				return false;
   			},
   			error:function(q){
   				alert('与服务器交互出错');
   			}
   		});
   		$('.data').editable({
   			type:'date',
    		placement:'bottom',//改变修改框的位置
   			datepicker:{
   				language:'zh-CN',//翻译成中文的日期
   			}
   		});
   		$('.select').editable({
   			type:'select',
   			placement:'bottom',//改变修改框的位置
   			//mode:'popup',//输入框里面修改
   			source:'data.php',//依赖服务器 
   			//source:[{a:1},{b:2},{c:3}],//可传递对象数组，前面的值是属性，后面的是值可选择
   			//source:['aa','bb','cc'],//传递可供选择的值
   		});
   		$('.checklist').editable({
   			type:'checklist',//可多选
   			placement:'bottom',//改变修改框的位置
   			//mode:'popup',//输入框里面修改
   			source:'data.php',//依赖服务器 
   			//source:[{a:1},{b:2},{c:3}],//可传递对象数组，前面的值是属性，后面的是值可选择
   			//source:['aa','bb','cc'],//传递可供选择的值
   		});
   		$('.datetime').editable({
   			type:'datetime',//可多选
   			placement:'bottom',//改变修改框的位置
   			datetimepicker:{
   				language:'zh-CN',//改成中文的
   			},
   		});
   	</script>
 </body>
      